<template>
	<view class="goods-details">
		<u-navbar leftIconSize="34rpx" autoBack :placeholder="true" bgColor="#ffffff">
			<view class="" slot="center">
				<text class="c-000 pf-sc fw-600" style="font-size: 34rpx;">商品详情</text>
			</view>
		</u-navbar>
		<view
			class="set-data-container w-750 b-box d-flex flex-c ali-i-c just-sw po-re"
			:style="{ height: containerHeight }"
		>
			<scroll-view scroll-y="true" :style="{ height: containerHeight }">
				<view class="w-750 b-box">
					<u-swiper
						:list="shopping.images"
						indicatorStyle="right: 20px"
						height="650rpx"
						@change="e => (currentNum = e.current)"
					>
						<view slot="indicator" class="indicator-num">
							<text v-if="shopping.images" class="indicator-num__text">
								{{ currentNum + 1 }}/{{ shopping.images.length }}
							</text>
						</view>
					</u-swiper>

					<!--  -->
					<view
						class="d-flex flex-c ali-i-s just-s b-box w-750 bg-ff"
						style="padding-left: 40rpx;border-bottom: 1rpx solid #eeeeee;"
					>
						<view class="w-100 b-box">
							<text
								class="pf-sc fw-600 w-100 text-ep-2"
								style="font-size: 40rpx;color: #262626;margin:30rpx 0 12rpx;"
							>
								{{ shopping.name }}
							</text>
						</view>
						<view style="margin-bottom: 36rpx;">
							<text class="pf-sc fw-600" style="font-size: 30rpx;color: #FF5C00;">￥</text>
							<text class="pf-sc fw-600" style="font-size: 40rpx;color: #FF5C00;">
								{{ shopping.price }}
							</text>
						</view>
					</view>
					<!--  -->
					<view
						class="d-flex flex-c ali-i-s just-s b-box w-750 bg-ff"
						style="min-height:316rpx;margin-bottom: 28rpx;"
					>
						<view
							@click="goumai"
							style="height: 102rpx;padding:0 42rpx 0 40rpx; "
							class="d-flex b-box flex-r ali-i-c just-sw po-re w-100"
						>
							<view class="d-flex flex-r ali-i-c just-s">
								<text
									class="pf-sc fw-400 "
									style="font-size: 28rpx;color: #666666;margin-right: 40rpx;"
								>
									选择
								</text>
								<text class="pf-sc fw-500 " style="font-size: 28rpx;color: #333333;">颜色分类</text>
							</view>
							<image
								:src="require('../static/rightc.png')"
								style="width: 17rpx;height: 23rpx;"
							></image>
						</view>
						<view style="height: 92rpx" class="w-100 d-flex flex-r ali-i-c just-c">
							<view
								style="width: 92rpx;height: 92rpx;border-radius: 16rpx;border: 4rpx solid #f0f0f0;margin-right: 24rpx;"
								class="d-flex flex-r ali-i-c just-c"
								v-for="(item, index) in shopping.guigelist"
								:key="index"
							>
								<image
									:src="'https://www.chejingjing.cn' + shopping.image"
									style="width: 60rpx;height:60rpx"
								></image>
							</view>
							<view
								style="width: 152rpx;height: 92rpx;border-radius: 16rpx;border: 4rpx solid #f0f0f0;margin-right: 24rpx;"
								class="d-flex flex-r ali-i-c just-c"
							>
								<text
									v-if="shopping.guigelist"
									class="pf-sc fw-400"
									style="font-size: 26rpx;color: #666666;"
								>
									共{{ shopping.guigelist.length }}款
								</text>
							</view>
						</view>
						<view
							@click="showGd"
							style="padding:30rpx 42rpx 0 40rpx;"
							class="d-flex b-box flex-r ali-i-c just-sw po-re w-100"
						>
							<view class="d-flex flex-r ali-i-c just-s" >
								<text
									class="pf-sc fw-400 "
									style="font-size: 28rpx;color: #666666;margin-right: 30rpx;"
								>
									参数
								</text>
								<text class="pf-sc fw-500 " style="font-size: 28rpx;color: #333333;max-width: 290px">
									{{ shopping.describe }}
								</text>
							</view>
						</view>
					</view>
					<u-gap height="20" bgColor="#F7F8F9"></u-gap>
					<!--  -->
					<view class="w-750 b-box d-flex flex-r ali-i-e just-c" v-if="shopping.content">
						<view
							class=" d-flex felx-r ali-i-c just-c"
							style="width: 112rpx;height: 60rpx;border-bottom: 4rpx solid #FFD300;"
						>
							<text class="pf-sc fw-500 c-333" style="font-size: 28rpx;">产品详情</text>
						</view>
					</view>
					<!-- 富文本 -->
					<view class="w-750 b-box d-flex ali-i-c just-c">
						<bctos-rich-text :nodes="shopping.content" width="690rpx"></bctos-rich-text>
					</view>
				</view>
			</scroll-view>

			<view style="height: 166rpx;" class="w-750 b-box bg-ff d-flex flex-r ali-i-c just-sw">
				<view
					style="width: 180rpx;height: inherit;"
					class="d-flex flex-c ali-i-c just-c"
					@click="goShopping"
				>
					<image
						:src="require('../static/card.png')"
						style="width: 32rpx;height: 35rpx;margin-bottom: 10rpx;"
					></image>
					<text class="pf-sc fw-400" style="font-size: 22rpx;color: #26387C;">购物车</text>
				</view>
				<view style="flex: 1;" class="d-flex flex-r ali-i-c just-sw">
					<u-button
						:throttleTime="700"
						plain
						@click="hqguigeID"
						:customStyle="{
							height: '86rpx',
							width: '254rpx',
							font: '500 32rpx PingFang SC',
							color: '#26387C',
							borderWidth: '0rpx',
							border: '2rpx solid  #26387C',
							borderRadius: '44rpx'
						}"
						shape="square"
						text="加入购物车"
					></u-button>
					<u-button
						:throttleTime="700"
						@click="goumai"
						:customStyle="{
							height: '86rpx',
							width: '254rpx',
							font: '500 32rpx PingFang SC',
							color: '#ffffff',
							borderWidth: '0rpx',
							background: 'linear-gradient(180deg, #4885C5 0%, #3B52A6 100%)',
							borderRadius: '44rpx'
						}"
						shape="square"
						text="立即购买"
					></u-button>
				</view>
			</view>
		</view>
		<!-- popup -->
		<u-popup
			:show="show"
			mode="bottom"
			overlayOpacity="0.8"
			:round="25"
			@close="close"
			@open="open"
		>
			<view class=" d-flex flex-c ali-i-s just-s b-box" style="padding: 40rpx;">
				<view class="d-flex flex-r ali-i-c just-s" style="margin-bottom: 42rpx;">
					<view style="width: 206rpx;height: 206rpx;margin-right: 20rpx;" class="w-100 ">
						<image
							:src="'https://www.chejingjing.cn' + shopping.image"
							style="width: 206rpx;height: 206rpx;border-radius: 16rpx;overflow: hidden;"
						></image>
					</view>
					<view style="height: 206rpx;" class="d-flex flex-c ali-i-s just-s">
						<text
							style="width: 408rpx;margin-bottom: 8rpx;font-size: 40rpx;color: #262626;"
							class="text-ep-1 pf-sc fw-600"
						>
							{{ shopping.name }}
						</text>
						<view class=" d-flex flex-r ali-i-c just-s">
							<text class="pf-sc fw-600 " style="font-size: 30rpx;color: #FF5C00;">￥</text>
							<text class="pf-sc fw-600 " style="font-size: 36rpx;color: #FF5C00;">
								{{ guigePrice * count }}
							</text>
						</view>
					</view>
				</view>

				<!-- 2022-09-02 商品多规格 -->
				<view v-if="guigelist.length">
					<!-- 添加scroll -->
					<scroll-view
						scroll-y="true"
						style="min-height: 92rpx;max-height:500rpx;"
						:showScrollBar="false"
					>
						<view>
							<view v-for="(item, index) of guigelist" :key="item.id">
								<view
									style="min-height: 92rpx;max-height:500rpx;margin-bottom: 42rpx;"
									class="w-100 b-box d-flex flex-r ali-i-s just-s"
								>
									<text
										style="margin-right:42rpx;font-size: 28rpx;color: #666666;"
										class="pf-sc fw-400 text-nw"
									>
										选择{{ item.title }}
									</text>
									<!-- 添加自动换行 -->
									<view
										v-if="item.gg_value.length"
										class="b-box d-flex flex-r flex-wp ali-i-c just-s"
										style="width: 50%;"
									>
										<view
											v-for="(gg_value, gg_index) of item.gg_value"
											:key="gg_value.id"
											style="width: 500rpx;height: 92rpx;border-radius:16rpx ;margin-right: 18rpx;word-break: break-all;
																margin-bottom: 18rpx;padding: 16rpx;background:#F0F0F0;border: 4rpx solid rgba(255,255,255,0);"
											class=" d-flex flex-r ali-i-c b-box"
											@click="SelectSpecs(gg_value, guigelist, item.gg_value, item.id)"
											:class="{ selected: gg_value.isActive && item.id == gg_value.parrentId }"
										>
											<text
												class="pf-sc fw-400 c-333"
												style="font-size: 28rpx;overflow: hidden; white-space: wrap;text-overflow: ;"
											>
										{{ gg_value.title }}
											</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>

				<view class="d-flex flex-c ali-i-s just-s" style="margin-bottom: 66rpx;">
					<text
						style="margin-right:42rpx;font-size: 28rpx;color: #666666;margin-bottom: 26rpx;"
						class="pf-sc fw-400"
					>
						数量
					</text>
					<view>
						<u-number-box :min="1" :max="100">
							<view
								slot="minus"
								class="d-flex flex-r ali-i-c just-c"
								style="width: 160rpx;height:78rpx;border-radius: 78rpx;background-color: #F3F3F3;"
								@click="Minus"
							>
								<text
									v-if="count > 1"
									class="pf-sc fw-600 "
									style="font-size: 36rpx;color: #262626"
								>
									-
								</text>
								<text v-else class="pf-sc fw-600" style="font-size: 36rpx;color: #969696">-</text>
							</view>
							<view
								slot="input"
								style="width: 100rpx;height:78rpx;border-radius: 78rpx;"
								class="d-flex flex-r ali-i-c just-c"
							>
								<text class="pf-sc fw-600 " style="font-size: 30;color: #262626;">{{ count }}</text>
							</view>
							<view
								slot="plus"
								@click="Plus"
								class="d-flex flex-r ali-i-c just-c"
								style="width: 160rpx;height:78rpx;border-radius: 78rpx;background-color: #F3F3F3;"
							>
								<text class="pf-sc fw-600" style="font-size: 36rpx;color: #262626">+</text>
							</view>
						</u-number-box>
					</view>
				</view>
				<!-- btn -->
				<view class="d-flex flex-c ali-i-s just-s" style="margin-bottom: 40rpx;">
					<u-button
						:throttleTime="700"
						@click="SubmitGoods(guigelist)"
						:customStyle="{
							height: '100rpx',
							width: '670rpx',
							font: '500 32rpx PingFang SC',
							color: '#ffffff',
							borderWidth: '0rpx',
							background: 'linear-gradient(180deg, #4885C5 0%, #3B52A6 100%)',
							borderRadius: '44rpx'
						}"
						shape="square"
						text="确定"
					></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { goodsdetail, addcars, guige } from '@/common/api.js';
import { _containerHeight, _addUnit, _rpxTpx } from '@/utils/GetSys.js';
import Unavbar from '../components/uview-ui/components/u-navbar/u-navbar';
import uSwiper from '../components/uview-ui/components/u-swiper/u-swiper';
import uGap from '../components/uview-ui/components/u-gap/u-gap';
import uPopup from '../components/uview-ui/components/u-popup/u-popup';
import uButton from '../components/uview-ui/components/u-button/u-button';
import uNumberBox from '../components/uview-ui/components/u-number-box/u-number-box';
export default {
	components: {
		'u-navbar': Unavbar,
		'u-swiper': uSwiper,
		'u-gap': uGap,
		'u-popup': uPopup,
		'u-button': uButton,
		'u-number-box': uNumberBox
	},
	data() {
		return {
			showGuiGe: false,
			paytype: 0, //0加入购物车，1购买
			id: '', //商品id
			guigeId: '', //规格编码
			//立即购买向下一页传递数据
			goodsActiveSpecs: null,
			containerHeight: '',
			currentNum: '',
			select: '',
			select2: '',
			acid: '', //规格id
			count: 1,
			show: false,
			acinfo: '', //选中的规格
			list1: [],
			//**2022-09-02 商品多规格*/
			/**商品详情*/
			shopping: null,
			/**商品规格*/
			guigelist: [],
			/**规格价格*/
			guigePrice:'',
			/**临时商品规格参数的“盒子”*/
			ActiveSpecsBox: [],
			NewActiveSpecs: []
			/**2022-09-02 商品多规格*/
		};
	},
	methods: {
		showGd() {
			this.showGuiGe = !this.showGuiGe;
		},
		// //////////////////2022-09-02////////////////////////////////////////
		/**2022-09-02 商品多规格*/
		/**获取商品详情数据处理*/
		getList() {
			let params = {
				id: this.id //商品的id
			};
			goodsdetail(params).then(res => {
				if (res.data.code === 1) {
					let guigelist = res.data.data.guigelist;
					this.shopping = res.data.data;
					this.guigePrice=this.shopping.price;
					console.log(this.shopping);
					/**处理规格*/
					if (guigelist.length > 0) {
						guigelist.forEach(item => {
							if (item.gg_value.length) {
								item.gg_value = item.gg_value.map(items => {
									return Object.assign(items, {
										/**父级标题*/
										parrentTitle: item.title,
										/**父级ID*/
										parrentId: item.id,
										/**父级编码*/
										parrentBianMa: item.bianma,
										/**初始化商品某规格下选项是否默认选中*/
										isActive: false
									});
								});
							}
						});
						this.guigelist = guigelist;
					}
				}
			});
		},
		/**
		 * 选择商品规格
		 * @param {Object} gg_value 当前选中的商品规格
		 * @param {Array} guigelist 当前商品规格所有集合
		 * @param {Object} guigelistItem 商品规格集合子项目
		 * @param {Number} ID 商品规格集合子项目ID
		 */
		SelectSpecs(gg_value, guigelist, guigelistItem, ID) {
			//同一规格某选项二次点击可取消选中二选一
			// if(gg_value.isActive){
			// 	guigelistItem.forEach(item => {
			// 		if (item.id == gg_value.id) item.isActive = false;
			// 	});
			// }else if(!gg_value.isActive){
			// 	gg_value.isActive = true;
			// 	guigelistItem.forEach(item => {
			// 		if (item.id !== gg_value.id) item.isActive = false;
			// 	});
			// }
			// 同一规格某选项二次点击不可取消选中二选一
			gg_value.isActive = true;
			guigelistItem.forEach(item => {
				if (item.id !== gg_value.id) item.isActive = false;
			});
			/**用来临时装商品规格参数的“盒子”*/
			this.ActiveSpecsBox = [];
			guigelist.forEach(guigelistItem => {
				if (guigelistItem?.gg_value.length) {
					guigelistItem.gg_value.forEach(childs => {
						if (childs.isActive == true) this.ActiveSpecsBox.push(childs);
					});
				}
			});
			/**经过处理后的商品规格参数 最终用户提交的商品规格·参数*/
			let newActiveSpecs = [...new Set(this.ActiveSpecsBox)];
			/**商品总规格==已选择规格*/
			if (guigelist.length == newActiveSpecs.length) {
				this.NewActiveSpecs = newActiveSpecs;
				//处理规格id
				let gdId = [];
				newActiveSpecs.forEach(item => {
					if (item?.bianma) gdId.push(item.bianma);
				});
				this.guigeId = gdId.join(','); //规格编码
				// 获取商品规格信息
				let params = {
					gid: this.id,
					guige: this.guigeId
				};
				console.log('当前商品规格信息',params);
				guige(params).then(res => {
					if (res.data.code === 1) {
						console.log('获取当前商品规格信息',res);
						this.acid = res.data.data.id; //当前的规格id
						this.guigePrice=res.data.data.lsprice;
					}
				});
			}
			//other..
			//
			//
		},
		/**关闭弹框重置用户历史选择规格*/
		close() {
			if (this.guigelist.length > 0) {
				this.guigelist.forEach(item => {
					if (item?.gg_value.length) {
						item.gg_value.forEach(items => {
							items.isActive = false;
						});
						
					}
				});
			}
			this.show = false;
			this.showGuiGe = false;
			this.guigePrice=this.shopping.price;
			this.NewActiveSpecs=[]
			this.ActiveSpecsBox=[]
		},
		// //////////////////2022-09-02////////////////////////////////////////

		//跳转到购物车页面
		goShopping() {
			uni.navigateTo({
				url: '/userModelA/userC/ShoppingCard/ShoppingCard'
			});
		},
		SubmitGoods(guigelist) {
			//商品详情商品规格长度
			let guigelistLength = guigelist.length;
			// 用户选择的规格长度
			let userGelistLength = this.NewActiveSpecs;
			if (
				guigelistLength &&
				userGelistLength.length &&
				guigelistLength == userGelistLength.length
			) {
				//如果过去成功直接发请求
				if (this.paytype == 0) {
					let params = {
						token: uni.getStorageSync('usertoken'),
						id: this.id,
						gid: this.acid,
						num: this.count
					};
					addcars(params).then(res => {
						console.log(res, 'gouwuc');
						if (res.data.code == 1) {
							uni.showToast({
								icon: 'none',
								title: '添加购物车成功'
							});
							return (this.show = false);
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							});
						}
					});
				} else {
					//等于1 操作立即购买
					uni.navigateTo({
						url: `/userModelA/userC/SubMitOrder/SubMitOrder?id=${this.shopping.id}&price=${this.guigePrice}&img=${this.shopping.image}&name=${this.shopping.name}&count=${this.count}&acid=${this.acid}&specs=${JSON.stringify(this.NewActiveSpecs)}`
					});
					this.show = false;
				}
			} else {
				uni.$u.toast('请选择商品规格');
			}
		},
		Selected(index, item) {
			this.acinfo = item;
			//选中
			this.select = item.id;
			console.log(index, item);
			// console.log(this.acinfo.bianma);
		},
		// 计数器
		Minus() {
			if (this.count <= 1) {
				this.count = 1;
				return;
			}
			this.count--;
		},
		Plus() {
			this.count++;
		},
		// 计数器
		//立即购买
		goumai() {
			this.paytype = 1;
			this.show = true;
		},

		//获取产品详情
		hqguigeID() {
			this.paytype = 0;
			this.show = true;
		},
		//执行加入购物车
		addcarscar() {},
		//弹框
		showPopup() {
			this.show = true;
		},
		open() {
			this.showGuiGe = true;
		}
		//弹框
	},
	onLoad(options) {
		this.containerHeight = parseInt(_containerHeight()) - 83 + 'px';
		this.id = options.id;
		this.getList();
	}
};
</script>

<style lang="scss">
.goods-details {
	.selected {
		background-color: #fff !important;
		border: 4rpx solid #0080ff !important;
	}
	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;

		&__text {
			color: #ffffff;
			font-size: 12px;
		}
	}
}
</style>
